<template>
	<view class="container">
		<view  class="red_top_bg">
			<view  class="language" @click="changeLan">
				<image :src="lang_img" class="langImg"></image>
			</view>
			<view  class="search_box" @click="gotoSearch">
				<i class="van-progress__pivot"></i>
				<input type="text" readonly="readonly" :placeholder="$t('搜索')" class="search_inp">
				<view  class="clear_inp"></view>
			</view>
			<view  class="msg">
				<image src="../../static/home/news.png" class="newsIcon" @click="gotonews"></image>
				
			</view>
		</view>
		<!-- 轮播 -->
		<view class="swiperView">
			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular :indicator-dots="false" autoplay="true">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="item in lbt" >
					<image class="swiperImg" :src="item.pic"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 九宫格 -->
		<view class="">
			<view class="gridList">
				<!-- 第一列 -->
				<view class="grid-view" @click="signin">
					<image src="../../static/home/3.png" class="gridIcon"></image>
					<view class="font12">{{$t('签到')}}</view>
				</view>
				<view class="grid-view" @click="myteam">
					<image src="../../static/home/4.png" class="gridIcon"></image>
					<view class="font12">{{$t('我的团队')}}</view>
				</view>
				<view class="grid-view" @click="recharge">
					<image src="../../static/home/5.png" class="gridIcon"></image>
					<view class="font12">{{$t('我要充值')}}</view>
				</view>
				<view class="grid-view" @click="withdraw">
					<image src="../../static/home/6.png" class="gridIcon"></image>
					<view class="font12">{{$t('提现')}}</view>
				</view>
				<!-- 第二列 -->
				<view class="grid-view" @click="gotoVip">
					<image src="../../static/home/7.png" class="gridIcon"></image>
					<view class="font12">VIP{{$t('特权')}}</view>
				</view>
				<view class="grid-view" @click="privacy">
					<image src="../../static/home/8.png" class="gridIcon"></image>
					<view class="font12">{{$t('隐私策略')}}</view>
				</view>
				<view class="grid-view"  @click="agreement">
					<image src="../../static/home/9.png" class="gridIcon"></image>
					<view class="font12">{{$t('用户协议')}}</view>
				</view>
				<view class="grid-view" @click="aboutus">
					<image src="../../static/home/10.png" class="gridIcon"></image>
					<view class="font12">{{$t('关于我们')}}</view>
				</view>
			</view>			
		</view>
		<!-- 新手推荐 -->
		<view class="newHand-view">
			<view class="newHand-top">
				<view class="newHand-text">
					<span class="newHand">{{datas.index1.title}}</span>
					<span class="newHand-tips">{{datas.index1.desc}}</span>
				</view>
				<view class="newHand-more" @click="gd">
					{{$t('更多')}}
				</view>
			</view>
			<view class="" v-for="(item, index) in datas.index1.list">
				<view class="center-view">
					<view class="center-container">
						<view class="center-text">
							<span class="">{{item.title}}</span>
						</view>
						<view class="percenter">
							<span class="">{{item.rate}}%</span>
						</view>
						
					</view>
				</view>
				<view class="invest-view">
					<view class="invest-time">
						{{$t('投资周期')}}:<span class="invest-timeNum">{{item.day}}</span>天
					</view>
					<view class="invest-num">
						{{$t('起投金额')}}:$<span class="invest-number">{{item.min}}</span>
					</view>
				</view>
				<view class="invest-btn">
					<view class="invest-button" @click="ljtz(item)">
						{{$t('立即投资')}}
					</view>
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="video-view">
			<video class="video-container" :src="video_url" controls="controls" 
			autoplay="autoplay" width="100%" height="100%" 
			show-fullscreen-btn="true" show-mute-btn="true"
			vslide-gesture-in-fullscreen="true"
			oncontextmenu="return false" webkit-playsinline="true"
			x-webkit-airplay="allow" playsinline="true" x5-playsinline="true">
			</video>
		</view>
		<!-- 热门投资 -->
		<view class="newHand-view">
			<view class="newHand-top">
				<view class="newHand-text">
					<span class="newHand">{{datas.index2.title}}</span>
					<span class="newHand-tips">{{datas.index2.desc}}</span>
				</view>
				<view class="newHand-more"  @click="gd">
					{{$t('更多')}}
				</view>
			</view>
			<view class="hot-bottom-view1" v-for="(item, index) in datas.index2.list">
				<view class="hot-view">
					<view class="hot-left">
						<p class="hot-percenter">{{item.rate}}%</p>
						<p class="hot-daytext">{{$t('日利')}}</p>
					</view>
					<view class="hot-center">
						<p class="hot-center-title"> {{item.title}} </p>
						<p class="hot-center-contianer"> {{item.desc}} </p>
					</view>
					<view class="hot-right">
						<p class="hot-btn" @click="ljtz(item)">{{$t('立即投资')}}</p>
					</view>
				</view>
			</view>

		</view>
		<!-- 打开页面的弹窗 -->
		<view class="">
			<view  v-show="maskinit" class="mask-init" @click="maskinit=false;maskinitShow=false"></view>
			<view  v-show="maskinitShow" class="mask-init-content">
				<p class="mask-init-title"><strong><em>{{tc_msg}}</em></strong></p>
				<p class="mask-init-btn"  @click="maskinit=false;maskinitShow=false">{{$t('确定')}}</p>
			</view>
			<!-- 立即投资 -->
			<view class="mask1-init" v-show="mask1">
				<p class="pop-title"> {{action.title}} </p>
				<view class="pro-center">
					<view class="percenter25">
						<p class="pro-interest"><span>{{action.rate}}</span>(Rs)</p>
						<p class="pro-interesttext">{{$t('日利')}}</p>
					</view>
					<view class="percenter25">
						<p class="pro-cycle"><span>{{action.day}}</span>天</p>
						<p class="pro-cycletext">{{$t('投资周期')}}</p>
					</view>
					<view class="percenter25">
						<p class="pro-amount">$<span>{{action.min}}</span></p>
						<p class="pro-amounttext">{{$t('起投金额')}}</p>
					</view>
				</view>
				<p class="van-field">
					<input type="text" inputmode="decimal" v-model="num" :placeholder="$t('请输入投资金额')" class="van-field__control">
				</p>
				<view class="btn-bottom">
					<view class="btn-cancel" @click="cancelFirst">
						{{$t('取消')}}
					</view>
					<view class="btn-sure" @click="sureBtnFirst">
						{{$t('确定')}}
					</view>
				</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maskinit:false,
				maskinitShow:false,
				mask1:false,
				mask2:false,
				mask3:false,
				mask4:false,
				swipers:[
					'../../static/home/1.png',
					'../../static/home/2.jpg'
				],
				datas:{
					index1:[
						{title:""}
					],
					index2:[
						{title:""}
					],
				},
				action:{},
				video_url:'',
				tc_msg:'',
				lbt:[],
				num:"",
				lang_img:""
			}
		},
		onShow() {
			this.lang_img = uni.getStorageSync('language_image') || '/static/lang/en_us.png'
			uni.setTabBarItem({// 修改底部导航
				index: 0,
				text: this.$t('home'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 1,
				text: this.$t('cf'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 2,
				text: this.$t('hd'),
			});
			uni.setTabBarItem({// 修改底部导航
				index: 3,
				text: this.$t('user'),
			});
		},
		onLoad() {
			this.getindex()	
		},
		methods: {
			gd(){
				uni.switchTab({
					url:'/pages/wealth/index'
				})
			},
			sureBtnFirst(){
				this.order(this.action.id,this.num)
			},
			ljtz(item){
				this.maskinit=true;
				this.mask1=true;
				this.action = item
			},
			getindex(){
				this.$http.get(
					'api/index/index',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.datas = res.data.data
					this.video_url = res.data.config.video_url
					this.tc_msg = res.data.config.tc_msg
					this.lbt = res.data.lbt
					this.maskinitShow = true
					this.maskinit = true
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			// 投资
			order(id,num){
				this.$http.post(
					'api/order/create',//接口名
					{id:id,num:num},//参数合集
				).then(res=>{
					this.cancelFirst()
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					this.num = ""
					this.action = {}
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			investImmediately(){
				this.maskinit=true;
				this.mask1=true;
			},
			investImmediately2(){
				this.maskinit=true;
				this.mask2=true;
			},
			investImmediately3(){
				this.maskinit=true;
				this.mask3=true;
			},
			investImmediately4(){
				this.maskinit=true;
				this.mask4=true;
			},
			cancelFirst(){
				this.maskinit=false;
				this.mask1=false;
			},
			cancelFirst2(){
				this.maskinit=false;
				this.mask2=false;
			},
			cancelFirst3(){
				this.maskinit=false;
				this.mask3=false;
			},
			cancelFirst4(){
				this.maskinit=false;
				this.mask4=false;
			},
			// 语言选择
			changeLan(){
				uni.navigateTo({
				    url: '/pages/lang/lang',
				});
			},
			// 消息
			gotonews(){
				uni.navigateTo({
					url:'/pages/index/news'
				})
			},
			// 搜索
			gotoSearch(){
				uni.navigateTo({
					url:'/pages/index/search'
				})
			},
			signin(){
				uni.navigateTo({
					url:'/pages/index/signin'
				})
			},
			//我的团队
			myteam(){
				uni.navigateTo({
					url:'/pages/index/myteam'
				})
			},
			// 充值
			recharge(){
				uni.navigateTo({
					url:'/pages/index/recharge'
				})
			},
			// 提现
			withdraw(){
				uni.navigateTo({
					url:'/pages/index/withdraw'
				})
			},
			// vip特权
			gotoVip(){
				uni.navigateTo({
					url:'/pages/index/vip'
				})
			},
			// 隐私策略
			privacy(){
				uni.navigateTo({
					url:'/pages/index/privacy'
				})
			},
			//用户协议
			agreement(){
				uni.navigateTo({
					url:'/pages/index/agreement'
				})
			},
			//关于我们
			aboutus(){
				uni.navigateTo({
					url:'/pages/index/aboutus'
				})
			},
		}
	}
</script>

<style scoped>
	.van-field__control {
	    display: block;
	    box-sizing: border-box;
	    width: 100%;
	    min-width: 0;
	    margin: 0;
	    padding: 0;
	    color: #323233;
	    line-height: inherit;
	    text-align: left;
	    background-color: transparent;
	    border: 0;
	    resize: none;
		color: #323233;
		text-align: left;
		font-size: 28rpx;
	}
	.van-field{
		padding: 20rpx;
	}
	.pro-cycle,.pro-amount{
		font-weight:600;
	}
	.pro-interesttext,.pro-cycle,.pro-cycletext,.pro-amount,.pro-amounttext{
		padding:10rpx 0;
	}
	.pro-interest{
		color:red;
		font-weight:600;
		padding:10rpx 0;
	}
	.btn-cancel,.btn-sure{
		width:50%;
		height:96rpx;
		line-height: 96rpx;
	}
	.btn-sure{
		color:red;
	}
	.btn-bottom{
		display: flex;
		justify-content: space-between;
		align-items:center;
		text-align: center;
	}
	.pro-center{
		display: flex;
		flex-direction: row;
		text-align: center;
		margin:10rpx;
	}
	.percenter25{
		width:33.33%;
		font-size:28rpx;
	}
	.mask1-init{
		background-color: #fff;
		position: fixed;
		top:34%;
		z-index:4;
		width:90%;
		margin:0 5%;
		border-radius: 32rpx;
	}
	.pop-title{
		border-bottom: 1px solid #ececec;
		padding: 30rpx 20rpx;
		margin: 10rpx 0;
		font-size: 32rpx;
		font-weight: 700;
	}
	.mask-init{
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:3;
		background-color: #000;
		opacity: 0.5;
		overflow-y: hidden;
	}
	.mask-init-content{
		background-color: #fff;
		position: fixed;
		top:40%;
		z-index:4;
		width:90%;
		margin:0 5%;
		border-radius: 32rpx;
	}
	.mask-init-title{
		max-height: 60vh;
		padding: 26px 24px;
		overflow-y: auto;
		font-size: 14px;
		line-height: 20px;
		color: #e74c3c;
	}
	.mask-init-btn{
		color: #ee0a24;
		text-align: center;
		height:96rpx;
		line-height:96rpx;
	}
	.font12{
		font-size:24rpx;
		color: #333;
		text-align: center;
		transform: scale(.85)
	}
	.hot-percenter{
		font-weight: 700;
		font-size: 28rpx;
		color: red;
		padding:6rpx 0;
	}
	
	.hot-bottom-view,.hot-bottom-view1{
		margin:20rpx;
		background-color: #fff;
	}
	.hot-bottom-view1{
		border-bottom:1px solid #ececec;
	}
	.hot-daytext,.hot-center-contianer{
		color:#999;
		font-size:24rpx;
		padding:6rpx 0;
	}
	.hot-center-title{
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding:10rpx 0;
		font-size:24rpx;
		height:10px;
	}
	.hot-btn{
		margin-top: 12px;
		color: #0a5;
		padding: 5px 5px;
		border-radius: 5px;
		border: 1px solid #0a5;
		font-size:24rpx;
	}
	.hot-view{
		display: flex;
		/* height:152rpx; */
	}
	.hot-left,.hot-right{
		width:20%;
		text-align: center;
		padding:30rpx 0;
	}
	.hot-center{
		width:60%;
		text-align: center;
		padding:30rpx 0;
	}
	.video-view{
		margin:10px 8px;
	}
	.video-container{
		width:100%;
	}
	.newHand-view{
		margin:20rpx 16rpx 60rpx 16rpx;
		background-color: #fff;
		border-radius: 2px;
		/* height:394rpx; */
	}
	.newHand-top{
		border-radius: 5px 5px 0 0;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: rgba(0, 0, 0, .8);
		background: #fff;
		border-bottom: 1px solid #f7f7f7;
		padding: 0 28rpx;
		display: flex;
		justify-content: space-between;
	}
	.newHand{
		font-weight:600;
		margin-right:10rpx;
	}
	.newHand-more{
		font-size: 24rpx;
		font-weight: 400;
		color: #b2b2b2;
	}
	.newHand-tips{
		display: contents;
		font-size: 24rpx;
		font-weight: 400;
		color: #b2b2b2;
		margin-left: 20rpx;
		
	}
	.center-text{
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 700;
		font-size: 32rpx;
		text-align: center;
		padding: 40rpx 0;
	}
	.percenter{
		text-align: center;
		color: red;
		font-size: 22px;
		font-weight: 700;
		margin: 0 0 40rpx 0;
	}
	.invest-view{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.invest-time,.invest-num{
		width:50%;
		text-align: center;
		font-size:24rpx;
		
	}
	.invest-btn{
		text-align: center;
		padding: 40rpx 0;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
	}
	.invest-button{
		width: 60%;
		min-width: 60px;
		background: #e7544d;
		color: #fff;
		padding: 10px 0;
		border-radius: 10px;
	}
	.grid-view{
		width:25%;
		text-align: center;
		margin-bottom:20rpx;
	}
	.swiperImg{
		width:100%;
		height:100%;
		border-radius: 12rpx;
	}
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #f6f6f6;
		position: relative;
	}
	.red_top_bg {
	    width: 100%;
	    max-width: 750px;
	    height: 44px;
	    margin: 0 auto;
	    background: #fff;
	    background-size: 100% 100%;
	    overflow: hidden;
		position: fixed;
		top: 0;
		z-index: 2;
		
	}
	.red_top_bg .language{
		position: absolute;
		top: 4px;
		left: 0;
		height: 36px;
	}
	.red_top_bg .language img{
	    height: 100%;
		border:0;
	}
	.search_box{
	    width: 70%;
	    height: 29px;
	    background-color: #f6f6f6;
	    border-radius: 17px;
	    margin: 8px 40px 0 40px;
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    padding: 0 10px 0 14px;
	}
	.van-progress__pivot {
	    position: absolute;
	    top: 50%;
	    box-sizing: border-box;
	    min-width: 3.6em;
	    padding: 0 5px;
	    color: #fff;
	    font-size: 10px;
	    line-height: 1.6;
	    text-align: center;
	    word-break: keep-all;
	    background-color: #1989fa;
	    border-radius: 1em;
	    transform: translateY(-50%);
	}
	
	.search_box .search_inp{
	    flex: 1;
	    margin: 0 8px;
	    font-size: 14px;
	    color: #000;
	    line-height: 20px;
	    height: 20px;
	}
	button, input, select, textarea {
	    outline: none;
	    -webkit-appearance: none;
	    border: none;
	    background: none;
	}
	.search_box .clear_inp{
	    width: 20px;
	    height: 20px;
	    background: url('../../static/home/d.png') no-repeat 50%;
	    background-size: 100% 100%;
	}
	.red_top_bg .msg{
	    position: absolute;
	    top: 9px;
	    right: 6px;
	    height: 23px;
	}
	.langImg{
		height:72rpx;
		width:72rpx;
	}
	.newsIcon{
		height:46rpx;
		width:46rpx;
	}
	.gridList{
		background: #fff;
		padding: 17px 8px 4px 8px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.gridIcon{
		width: 88rpx;
		height:88rpx;
	}
	.swiperView{
		padding: 108rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
	}
	/* -------------------------------------------------------------- */
	
</style>
